<template>
  <div v-if="postDetail" class="post-detail-container">
    <!-- 加载指示器 -->
    <div v-if="loading" class="loading">Loading...</div>

    <article class="post-content">
      <header class="post-header">
        <h1 class="post-title">{{ postDetail.title }}</h1>
        <div class="post-meta">
          <span>作者：{{ postDetail.createBy }}</span>
          <span>|</span>
          <span>发帖时间：{{ formatDate(postDetail.createTime) }}</span>
        </div>
      </header>

      <section class="post-body" v-html="formattedContent"></section>

      <!-- 你可以在这里添加更多交互元素，例如点赞、评论等 -->
      <footer class="post-footer">
        <button @click="handleAction">返回列表</button>
      </footer>
    </article>
  </div>

  <!-- 当没有帖子详情时显示提示信息 -->
  <div v-else class="no-post-message">正在加载帖子详情...</div>
</template>

<script>
import { getPostDetailFun } from '@/network/post/PostQuery';
import marked from 'marked'; // 引入 marked 库

export default {
  data() {
    return {
      postDetail: null,
      loading: true, // 添加加载状态
    };
  },
  computed: {
    formattedContent() {
      // 使用 marked 将 Markdown 转换为 HTML
      if (this.postDetail && this.postDetail.content) {
        return marked(this.postDetail.content);
      }
      return '';
    }
  },
  created() {
    this.fetchPostDetail();
  },
  methods: {
    async fetchPostDetail() {
      const cachedPostDetail = this.$route.state?.postDetail;
      if (cachedPostDetail) {
        this.postDetail = cachedPostDetail;
        this.loading = false;
      } else {
        const postId = this.$route.query.id;
        if (postId) {
          try {
            const res = await getPostDetailFun(postId);
            if (res.code === '0') {
              this.postDetail = res.result;
            } else {
              this.$message.error(res.msg);
            }
          } catch (error) {
            console.error('Error fetching post detail:', error);
            this.$message.error('获取帖子详情失败');
          } finally {
            this.loading = false;
          }
        }
      }
    },
    formatDate(date) {
      return date ? new Date(date).toLocaleString() : '';
    },
    handleAction() {
      this.$router.push('/post/query'); // 返回到帖子列表页或其他页面
    }
  }
};
</script>

<style scoped>
.post-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.post-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.post-header {
  margin-bottom: 20px;
}

.post-title {
  font-size: 2em;
  margin: 0 0 10px;
}

.post-meta {
  color: #777;
  font-size: 0.9em;
}

.post-body {
  line-height: 1.6;
  white-space: pre-wrap; /* 确保内容中的换行符被保留 */
}

.post-footer {
  margin-top: 20px;
  text-align: center;
}

button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

.loading {
  text-align: center;
  font-size: 1.2em;
  color: #777;
}

.no-post-message {
  text-align: center;
  font-size: 1.2em;
  color: #777;
  padding: 20px;
}
</style>